<template>
	<view>
		<!-- 景区详情 -->
		<!-- 导航栏 -->
		<u-navbar :safeAreaInsetTop="false" :autoBack="true" :bgColor="bgColor" safeAreaInsetTop>
			<view slot="left">
				<u-icon name="arrow-left" size="19" color="black"></u-icon>
			</view>
		</u-navbar>

		<!-- 轮播图 -->
		<view class="swiperTop">
			<u-swiper :list="listPhoto" @change="e => currentNum = e.current" :autoplay="true" height="270"
				indicatorStyle="right: 20px" radius="0">
				<view slot="indicator" class="indicator-num">
					<text
						class="indicator-num__text">{{ currentNum + 1 }}/{{ scenicAreaDetailsData.photo?scenicAreaDetailsData.photo.length:0 }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="scenicSpotDetailsDiv">
			<view class="scenicSpotDetailsTitle">
				<span>{{scenicAreaDetailsData.name}}</span>
				<view class="scenicSpotDetailsTab">
					{{scenicAreaDetailsData.level}}A
				</view>
			</view>
			<view class="scenicSpotDetailsLabel" v-if="scenicAreaDetailsData.label!=''">
				<view class="scenicSpotDetailsLabelItem" v-for="(item,index) in scenicAreaDetailsDataLabel"
					:key="index">
					{{item}}
				</view>
			</view>
			<p @click="openPopup(scenicAreaDetailsData.description,1)">景区介绍 ></p>
			<view class="scenicDiv">
				<view class="scenicDivLeft">
					<view class="scenicDivLeftTop">
						<span>开园时间</span>
						<u-icon @click="getPhoto(scenicAreaDetailsData.phone)" name="phone-fill"
							color="#bde1a8"></u-icon>
					</view>
					<view class="scenicDivLeftBot">
						{{scenicAreaDetailsData.timeQuantum}}
					</view>
				</view>
				<view class="scenicDivRight">
					<view class="scenicDivLeftTop">
						<span>景区地址</span>
						<u-icon name="map-fill" size="22" color="#bde1a8"></u-icon>
					</view>
					<view class="scenicDivLeftBot">
						<view>{{scenicAreaDetailsData.address}}</view>
						<span>导航</span>
					</view>
				</view>
			</view>
		</view>
		<u-sticky offset-top="65">
			<view class="scenicSpot">
				<view>景区购票</view>
				<span @click="openPopup(scenicAreaDetailsData.mattersNeedAttention,2)">入园须知 ></span>
			</view>
		</u-sticky>
		<!-- 底部门票购买 -->
		<view class="scenicSpotScroll" v-if="scenicAreaCommodityProductType.length>0">
			<view class="scenicSpotScrollDiv">
				<scroll-view scroll-y class="left-aside">
					<view v-for="(item,index) in scenicAreaCommodityProductType" :key="index" class="f-item  f-item1"
						:class="{active: item.id == currentTitle}" @click="tabtap(item)">
						{{item.name}}
					</view>
				</scroll-view>
				<scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-top="tabScrollTop"
					@scroll="asideScroll">
					<view v-for="(it,ind) in scenicAreaCommodityProductType" :key="ind" class="f-item"
						:id="'main-'+it.id">
						<view class="titleDiv">
							<view class=""></view>
							{{it.name}}
						</view>
						<view v-for="item in scenicAreaDetailsData.scenicAreaCommodityProductInfo" :key="item.id"
							class="s-list">
							<view class="" v-if="item.type==it.name">
								<view class="s-item">
									<view class="s-itemName">{{item.name}}</view>
									<view class="s-itemPrice">
										￥<span>{{item.price}}</span>
									</view>
								</view>
								<view class="b-item">
									<view class="b-itemLeft">
										<view class="b-itemLeftL">
											可退票
										</view>
										<view class="b-itemLeftR" @click="openPopup(item,3)">
											购票须知
										</view>
									</view>
									<view class="b-itemRight">
										购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="isShow" mode="bottom" @close="close" :round="10" closeable :closeOnClickOverlay="false"
			:overlay="true">
			<view class="popupDiv">
				<h3 v-if="popupDataTitle!=''">{{popupDataTitle}}</h3>
				<view v-if="popupData!=''" v-html="popupData" style="padding: 0 40rpx;margin-bottom: 40rpx;"></view>
				<view class="popupDivRow" v-if="popupDataRow &&popupData==''">
					<view class="popupDivRowFy" v-if="popupDataRow.descriptionFees!=''">
						<view class="popupDivRowFyF">
							<img src="/static/scenicSpotDetails/fy.png" alt="" />
							<span>
								费用说明
							</span>
						</view>
						<view class="popupDivRowFyT" v-html="popupDataRow.descriptionFees"></view>
					</view>
					<view class="popupDivRowFy" v-if="popupDataRow.descript!=''">
						<view class="popupDivRowFyF">
							<img src="/static/scenicSpotDetails/sysm.png" alt="" />
							<span>
								使用说明
							</span>
						</view>
						<view class="popupDivRowFyT" v-html="popupDataRow.descript"></view>
					</view>
					<view class="popupDivRowFy">
						<view class="popupDivRowFyF">
							<img src="/static/scenicSpotDetails/yy.png" alt="" />
							<span>
								入园方式
							</span>
						</view>
						<view class="popupDivRowFyT">
							持身份证入园
						</view>
					</view>
					<view class="popupDivRowFy">
						<view class="popupDivRowFyF">
							<img src="/static/scenicSpotDetails/dd.png" alt="" />
							<span>
								订单起购
							</span>
						</view>
						<view class="popupDivRowFyT">
							每个订单起购数量1份
						</view>
					</view>
					<view class="popupDivRowFy">
						<view class="popupDivRowFyF">
							<img src="/static/scenicSpotDetails/yk.png" alt="" />
							<span>
								游客限制
							</span>
						</view>
						<view class="popupDivRowFyT">
							实名制购票
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		scenicAreaDetails
	} from '@/api/scenicSpotDetails.js'
	export default {
		data() {
			return {
				currentNum: 0,
				scenicAreaDetailsData: {},
				scenicAreaDetailsDataLabel: [],
				// 存放左侧菜单的
				scenicAreaCommodityProductType: [],
				listPhoto: [],
				// 底部的门票
				sizeCalcState: false,
				tabScrollTop: 0,
				currentTitle: 1,
				bgColor: '#ffffff00',
				isShow: false,
				popupData: '',
				popupDataTitle: '',
				popupDataRow: {},
				id: ''
			};
		},
		async onLoad(options) {
			this.id = options.id;
			this.getData()
		},
		methods: {
			// 切换
			tabtap(item) {
				if (!this.sizeCalcState) {
					this.getDynamicElementHeights();
				}
				this.currentTitle = item.id
				this.$nextTick(function() {
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 900
						})
					}, 200) // 要加点延迟, 不然有可能不生效
				})
				let index = this.scenicAreaCommodityProductType.findIndex(sitem => sitem.id == item.id);
				this.tabScrollTop = this.scenicAreaCommodityProductType[index].top;
			},
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.getDynamicElementHeights();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.scenicAreaCommodityProductType.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					console.log(tabs[0].id);
					this.currentTitle = tabs[0].id;
				}
			},
			getDynamicElementHeights() {
				let h = 0;
				const query = uni.createSelectorQuery().in(this);
				this.scenicAreaCommodityProductType.forEach(res => {
					let view = uni.createSelectorQuery().select("#main-" + res.id);
					view.fields({
						size: true
					}, data => {
						res.top = h;
						h += data.height;
						res.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			// 吊起电话
			getPhoto(data) {
				uni.makePhoneCall({
					phoneNumber: data,
				});
			},
			// 点击出现弹框
			openPopup(data, num) {
				this.popupData = data
				this.isShow = true
				if (num == 1) {
					this.popupDataTitle = '景区介绍'
				} else if (num == 2) {
					this.popupDataTitle = '入园须知'
				} else if (num == 3) {
					this.popupDataRow = data
					this.popupData = ''
					this.popupDataTitle = '购票须知'
				}
			},
			// 弹框关闭
			close() {
				this.isShow = false
				this.popupDataTitle = ''
				this.popupDataRow = {}
			},
			async getData() {
				let res = await scenicAreaDetails(this.id)
				if (res.code == 200) {
					this.scenicAreaDetailsData = res.data
					if (res.data.label != '') {
						this.scenicAreaDetailsDataLabel = res.data.label.split(',')
					}
					if (res.data.scenicAreaCommodityProductType.length > 0) {
						res.data.scenicAreaCommodityProductType.forEach((re, index) => {
							this.scenicAreaCommodityProductType.push({
								name: re,
								id: index + 1
							})
						})
						this.currentTitle = this.scenicAreaCommodityProductType[0].id
					}
					this.listPhoto = res.data.photo
				}
			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = '#ffffff';
			} else {
				this.bgColor = '#ffffff00';
			}
		}
	}
</script>

<style lang="scss">
	.popupDiv {
		padding: 40rpx 0 0;
		max-height: 80vh;

		.popupDivRow {
			width: 100%;
			max-height: 80vh;
			overflow-y: auto;
			background-color: #f1f2f6;
			padding-top: 20rpx;
			padding-bottom: 140rpx;


			.popupDivRowFy {
				width: calc(100% - 40rpx);
				padding: 20rpx;
				background-color: #ffffff;
				margin: 0 auto 20rpx;
				border-radius: 20rpx;

				.popupDivRowFyT {
					color: #666666;
					font-size: 26rpx;
				}


				.popupDivRowFyF {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					gap: 10rpx;
					margin-bottom: 10rpx;

					img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		h3 {
			text-align: center;
			margin: 0 0 20rpx;
			font-size: 40rpx;
		}
	}

	.scenicSpotScroll {
		position: relative;
		width: 100%;
		padding-right: 20rpx;
		z-index: 0;

		.scenicSpotScrollDiv {
			display: flex;
			padding-bottom: 20rpx;

			.right-aside {
				flex: 1;
				overflow: hidden;
				padding-left: 20upx;
				height: 80vh;


				.f-item {
					background-color: #ffffff;
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 20rpx;

					.titleDiv {
						font-size: 40rpx;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px solid #6666664d;
						display: flex;
						align-items: center;

						view {
							background: linear-gradient(to bottom, #adf384, #058d96);
							width: 10rpx;
							height: 40rpx;
							border-radius: 5rpx;
							margin-right: 20rpx;
						}
					}
				}

				.b-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.b-itemRight {
						background: linear-gradient(to bottom, #adf384, #058d96);
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						color: #ffffff;
					}

					.b-itemLeft {

						display: flex;
						align-items: center;
						gap: 20rpx;

						.b-itemLeftR {
							font-size: 25rpx;
							color: #666666;
						}

						.b-itemLeftL {
							padding: 5rpx 10rpx;
							background-color: #ffe7df;
							color: #ff865f;
							border-radius: 10rpx;
							font-size: 25rpx;
						}
					}
				}


				.s-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					color: $font-color-dark;
					margin-bottom: 20rpx;

					.s-itemPrice {
						color: red;

						span {
							font-size: 40rpx;
						}
					}

					.s-itemName {
						width: 90%;
					}
				}
			}

			.left-aside {
				flex-shrink: 0;
				width: 200upx;
				height: 80vh;
				background-color: #fff;
				border-radius: 0 20rpx 20rpx 0;

				.f-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100upx;
					font-size: 28upx;
					color: $font-color-base;
					position: relative;


					&.active {
						color: #ffffff;
						background: linear-gradient(to right, #8fd07b, #15b8d6);
						border-radius: 0 20rpx 20rpx 0;
						// &:before {
						// 	content: '';
						// 	position: absolute;
						// 	left: 0;
						// 	top: 50%;
						// 	transform: translateY(-50%);
						// 	height: 36upx;
						// 	width: 8upx;
						// 	background-color: $base-color;
						// 	border-radius: 0 4px 4px 0;
						// 	opacity: .8;
						// }
					}
				}
			}
		}
	}

	// 景区购票字段
	.scenicSpot {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
		padding: 0 20rpx;
		background-color: #ffffff;

		span {
			font-size: 26rpx;
			color: #666666;
		}

		view {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	// 中间的内容
	.scenicSpotDetailsDiv {
		width: calc(100% - 40rpx);
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: -70rpx;
		z-index: 1;
		position: relative;

		.scenicDiv {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			width: 100%;

			.scenicDivRight {
				background-color: #f6fbff;
				padding: 10rpx 20rpx;
				width: 59%;
				border-radius: 10rpx;

				.scenicDivLeftBot {
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						width: 80%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.scenicDivLeftTop {

					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}
			}

			.scenicDivLeft {
				background-color: #f6fbff;
				padding: 10rpx 20rpx;
				width: 40%;
				border-radius: 10rpx;

				.scenicDivLeftBot {
					font-size: 24rpx;
				}

				.scenicDivLeftTop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}
			}
		}

		.scenicSpotDetailsLabel {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin: 10rpx 0;

			.scenicSpotDetailsLabelItem {
				padding: 5rpx 10rpx;
				background-color: #ffeddf;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #b38260;
			}
		}

		.scenicSpotDetailsTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.scenicSpotDetailsTab {
				padding: 5rpx 10rpx;
				background-color: red;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 20rpx;
			}

			span {
				font-size: 50rpx;
				font-weight: bolder;
			}
		}
	}

	// 轮播图
	.swiperTop {
		position: relative;

		.indicator-num {
			.indicator-num__text {
				position: absolute;
				color: #ffffff;
				bottom: 70rpx;
				right: 10rpx;
			}
		}
	}

	page {
		background: #f5f5f5;
	}
</style>